<template>
  <div :style="customMainCss">
    <v-huaxin-rain :designer="designer"/>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
import "@/../lib/baiduscript/index.css"

const customMainCss = ref({
  height: window.innerHeight - 102 + 'px',
  background: 'white',
  overflow: 'hidden'
})
const designer = ref({
  height: window.innerHeight - 102,
  width: window.innerWidth - 200
})
</script>
<style scoped>
:deep(.el-main) {
  --el-main-padding: 5px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
}

:deep(.el-select__wrapper) {
  border-radius: 0;
}

:deep(.el-button) {
  border-radius: 0;
}

:deep(.ol-zoom-in) {
  margin-top: 5px;
  margin-left: 5px;
  border: 1px solid #409EFF;
  color: #409EFF;
  cursor: pointer;
  width: 26px;
  height: 26px;
  font-weight: bolder;
  font-size: 14px;
  background: white;
}

:deep(.ol-zoom-out) {
  margin-left: 5px;
  border: 1px solid #409EFF;
  color: #409EFF;
  cursor: pointer;
  width: 26px;
  height: 26px;
  font-weight: bolder;
  font-size: 14px;
  background: white;
}

:deep(.ol-rotate-reset) {
  display: none;
}

:deep(.el-card__body) {
  padding: 5px;
}
</style>
